<template>
	<div class="">
		<div v-show="!isShow">
	   		<!-- 基本信息 -->
		   <div class="basetitle">
			   <form class="form-cont">
			   		<fieldset>
			   			<legend class="legcont"><span>基本信息</span><i class="ion ion-chevron-up"></i></legend>
			   			<div class="hidethis">
							<div class="form-baseinput">
								<!--<div class="form-group formline">
									<label>驾驶员：</label>
									<input type="text" class="form-control" v-model="list.driverName" placeholder="驾驶员">
								</div>-->
								<div class="form-basetop basetop-weui form-show">
									<x-input title="驾驶员：" v-model="list.driverName" readonly disabled placeholder="驾驶员"></x-input>
								</div>
								<div v-if="!stateX" class="form-group formline form-weui">
									<datetime v-model="list.jraDate" title="行程日期：" class="from-contrl" placeholder="行程日期"></datetime>
								</div>
								<div v-if="stateX" class="form-basetop basetop-weui form-show">
									<x-input title="行程日期：" v-model="list.jraDate" readonly disabled placeholder="行程日期"></x-input>
								</div>
								<!--<div class="form-group formline">
									<label>行程日期：</label>
									<input type="date" class="form-control" v-model="list.jraDate" placeholder="行程日期">
								</div>-->
								<div class="form-group formline">
									<label>驾驶路线：</label>
									<input type="text" class="form-control width30" required tips="开始城市" v-model="list.routeBegin" placeholder="开始城市(必填)"> <p>至</p>
									<input type="text" class="form-control width30" required tips="到达城市" v-model="list.routeEnd" placeholder="到达城市(必填)">
								</div>
							</div>
							<div class="form-title clearFix">
								<p>车辆信息</p>
							</div>
							<div class="form-baseinput">
								<!--<div class="form-group formline">
									<label>品牌：</label>
									<input type="text" class="form-control" v-model="list.carBrand" placeholder="品牌">
								</div>
								<div class="form-group formline">
									<label>型号：</label>
									<input type="text" class="form-control" v-model="list.carModel" placeholder="型号">
								</div>-->
								<div class="form-basetop basetop-weui form-show">
									<x-input title="品牌：" v-model="list.carBrand" readonly disabled placeholder="品牌"></x-input>
								</div>
								<div class="form-basetop basetop-weui form-show">
									<x-input title="型号：" v-model="list.carModel" readonly disabled placeholder="型号"></x-input>
								</div>
								<div class="form-group formline">
									<label>座位数：</label>
									<input type="number" class="form-control" id="seating" required tips="座位数" v-model="list.seatCount" placeholder="座位数(必填且为大于0的数字)">
								</div>
							</div>
							<div class="form-textarea">
								<div class="form-title clearFix">
									<p>具体线路描述：</p>
								</div>
								<div class="form-group">
									<textarea name="" rows="3" class="form-control" required tips="具体线路描述" v-model="list.jraDescribe" placeholder="具体线路描述(必填)"></textarea>
								</div>
							</div>
						</div>
					</fieldset>
				</form>
			</div>

			<!-- 行程前的计划安排 -->
		   <div class="basetitle">
			   <form class="form-cont">
			   		<fieldset>
			   			<legend class="legcont"><span>行程前的计划安排</span><i class="ion ion-chevron-down"></i></legend>
						<div class="form-baseinput jraulli hidethis">
							<ul>
								<li v-for="befroe in beforeList">
									<p>{{befroe.title}}</p>
									<div class="before_radio">
										<label>
											<input type="radio" checked :name="befroe.id" @click="hideChoose(befroe)" :value="befroe.id + '&/&N'"> 不是
										</label>
										<label>
											<input type="radio" :name="befroe.id" @click="hideChoose(befroe)" :value="befroe.id + '&/&S'"> 不适用
										</label>
										<label>
											<input type="radio" :name="befroe.id" :value="befroe.id + '&/&Y'" @click="yesChoose(befroe)"> 是
										</label>
									</div>
									<div class="before_other" v-show="befroe.state">
										<p>{{befroe.yesTitle}}</p>
										<input type="text" name="" class="form-control" :id="befroe.id">
									</div>
								</li>
							</ul>
							<div class="remark_brfore">
								<p>备注：驾驶员出发前一晚睡眠要确保充足(至少6~8个小时），并且没有受药物影响或酒精的影响；</p>
								<p>驾驶员出车前至少8个小时内没有饮用酒类物质，也没有服用感冒药或镇定剂类药物；</p>
				            	<p>如有问题或疑虑，请联系直线经理或BP活动负责人！</p>
							</div>
						</div>

					</fieldset>

				</form>
				
			</div>

			<!-- 路线及路况 -->
		   <div class="basetitle">
			   <form class="form-cont">
			   		<fieldset>
			   			<legend class="legcont"><span>路线及路况</span><i class="ion ion-chevron-down"></i></legend>
						<div class="form-baseinput jraulli hidethis">
							<ul>
								<li v-for="befroe in roadStatus">
									<p>{{befroe.title}}</p>
									<div class="before_radio">
										<label>
											<input type="radio" checked :name="befroe.id" @click="hideChoose(befroe)" :value="befroe.id + '&/&N'"> 是
										</label>
										<label>
											<input type="radio" :name="befroe.id" @click="hideChoose(befroe)" :value="befroe.id + '&/&S'"> 不适用
										</label>
										<label>
											<input type="radio" :name="befroe.id" :value="befroe.id + '&/&Y'" @click="yesChoose(befroe)"> 不是
										</label>
									</div>
									<div class="before_other" v-show="befroe.state">
										<p>{{befroe.yesTitle}}</p>
										<input type="text" name="" class="form-control" :id="befroe.id">
									</div>
								</li>
							</ul>

						</div>
					</fieldset>
				</form>
			</div>

			<!-- 沿途事故可能多发路段（事故黑点）识别（通常5个以内）及风险控制措施 -->
		   <div class="basetitle">
			   <form class="form-cont">
			   		<fieldset>
			   			<legend class="legcont"><span>沿途事故可能多发路段识别及风险控制措施</span><i class="ion ion-chevron-down"></i></legend>
						<div class="form-baseinput jraulli hidethis">
							<div class="">
								<div class="form-baseinput clearFix" v-for="(item,index) in items">
									<div class="form-group formline labellarge jranoedit">
										<label>事故黑点地点：</label>
										<p class="stateTask">
											{{item.jarSite}}
										</p>
									</div>
									<div class="form-group formline labellarge jranoedit">
										<label>现场限速数值：</label>
										<p class="stateTask">
											{{item.jarSpeed}}
										</p>
									</div>
									<div class="form-group formline labellarge jranoedit">
										<label>主要风险：</label>
										<p class="stateTask">
											{{item.jarRisk}}
										</p>	
									</div>
									<div class="form-group formline labellarge jranoedit">
										<label>风险分析：</label>
										<p class="stateTask">
											{{item.jarAnalsis}}
										</p>	
									</div>
									<div class="form-group formline labellarge jranoedit">
										<label>控制措施：</label>
										<p class="stateTask">
											{{item.jarControl}}
										</p>	
									</div>
									<div class="delclass clearFix" v-if="$route.query.state != 1 && $route.query.state != 2">
										<button type="button" class="reddel" @click="delRisk(index)">删除</button>
									</div>
								</div>
							</div>
							<a class="companypic" id="chooseImages" @click="addRist" v-if="items.length < 5 && $route.query.state != 1 && $route.query.state != 2">
				              <i class="ion ion-android-add fontcompany"></i>
				              <!-- <span class="bluecolor block">添加风险</span> -->
				            </a>
						</div>
					</fieldset>
				</form>
			</div>
		
			<div class="savebtn" v-if="$route.query.state != 1 && $route.query.state != 2">
	            <button type="button" class="" @click="savenm(0)">保存</button>
	            <button type="button" class="" @click="savenm(1)">保存并提交</button>
	        </div>
        </div>
        <loading v-if="loadShow"></loading>
	    <toast v-if="toastShow" :message="tipMessage"></toast>
        <add-risk v-if="isShow"></add-risk>
        <transition name="slide">
	      <tips v-show="tipsShow" :tips="tipsMessage"></tips>
	    </transition>
	</div>
</template>
<script type="text/javascript">
	import { Group, Datetime, XInput } from 'vux'
	import addRisk from '../../components/safereport/addRisk'

	import safeUrl from '../../assets/js/insterface'

	import http from '../../assets/js/http_mixin'

	import vaild from '../../assets/js/vaild_form'

	export default{
		data(){
			return {
				stateX:true,

				isSubmit:true,// 防止保存和提交短事件内触发多次

				isShow:false,

				checkName:"",
				//人员基本信息
				list:{
					id:'',
					driverName:'',
					driverNo:'',   //员工编号
					depId:'',    //部门
					jraDate:'',   // 行程日期
					routeBegin:'', //开始城市
					routeEnd:'',  //结束城市
					carBrand:'',  //品牌
					carModel:'',  //车型
					seatCount:'',   //座位号
					jraDescribe:'',  //描述
					jraSelect:[],  //单选数组
					jraContent:'', //JSON数组
					state:''   //状态
				},




				empName:'',
				dateToday:'',
				items:[],
				beforeList:[
					{
						id:1,
						title:'完成了出发前的车辆检查，并且车况良好',
						yesTitle:'最近车辆的保养日期',
						state:false
					},{
						id:2,
						title:'路线规划途中有充足的休息时间与休息点',
						yesTitle:'沿途计划的休息点/服务站',
						state:false
					},{
						id:3,
						title:'路线规划已经考虑了道路限速与路况，预留了充分的行驶时间',
						yesTitle:'预计驾驶时间',
						state:false
					},{
						id:4,
						title:'涉及在晚上11点到次日凌晨5点间开车',
						yesTitle:'具体开车时段（几点到几点）',
						state:false
					},{
						id:5,
						title:'当天总驾驶时间不超过8小时',
						yesTitle:'当天累计开车时间长',
						state:false
					},{
						id:6,
						title:'当天总工作小时数最多不超过16小时',
						yesTitle:'当天累计工作时间长',
						state:false
					},{
						id:7,
						title:'事先研究过地图，了解开车路线中可能遇到的各个问题的解决方法',
						yesTitle:'可能面临的问题有',
						state:false
					},{
						id:8,
						title:'事先了解路途中可能会遇到的天气',
						yesTitle:'沿途的天气预报是',
						state:false
					}
				],
				roadStatus:[
					{
						id:9,
						title:'路线中的道路大部分是否平整并有交通标志标线',
						yesTitle:'无交通标示路段',
						state:false
					},{
						id:10,
						title:'路线中没有危险的急转弯',
						yesTitle:'急转弯地点',
						state:false
					},{
						id:11,
						title:'沿途道路是否都有路灯照明（高速路段除外）',
						yesTitle:'无照明路段',
						state:false
					},{
						id:12,
						title:'沿途不经过光线明暗突然变化（隧道等）的路段',
						yesTitle:'隧道名/地点',
						state:false
					},{
						id:13,
						title:'沿途不行经交通黑点或高风险区(客/货运站等）',
						yesTitle:'客货站名',
						state:false
					},{
						id:14,
						title:'如果通过山路或陡峭的路段，适当的安全防护已经就位',
						yesTitle:'路段名/地点',
						state:false
					},{
						id:15,
						title:'沿途不经过可能会使车流混乱的道路施工区域',
						yesTitle:'施工区域地点',
						state:false
					}
				]
			}
		},
		components:{
			addRisk,
			Group,
			Datetime,
			XInput
		},
		mixins:[http,vaild],
		mounted() {
			// 默认显示今天的时间
			this.list.driverNo = this.$route.query.empNo;
			this.stateX = this.$route.query.state ? true : false;
			const d = new Date();
			var months = d.getMonth() + 1;
			var days =  d.getDate();
			if(months < 10){
				months = '0' + months;
			}
			if(days < 10){
				days = '0' + days;
			}
			this.list.jraDate = d.getFullYear()+"-"+months+"-"+days;

			this.hideAll();
			this.tagChage();

			document.getElementsByClassName('hidethis')[0].style.display = 'block';
			document.getElementsByTagName('legend')[0].childNodes[1].classList.remove('ion-chevron-down');
			document.getElementsByTagName('legend')[0].childNodes[1].classList.add('ion-chevron-up');

			this.selectData();
		},
		methods:{
			selectData(callback) {
				// debugger;
				// if(!this.$route.query.state){
					this.$http.post(safeUrl.jraSelectUserInfo,{empNo:this.list.driverNo},{emulateJSON: true})
					.then((response) =>{
						if(response.data.type == "2"){
							let userInfo = response.data.empInfo;
							this.checkName = userInfo.driveName;
							this.list.driverName = userInfo.driveName;
							this.list.carModel = userInfo.carModel;
							this.list.carBrand = userInfo.carBrand;
							this.list.depId = userInfo.depId;
							this.enterData();
							// console.log("111")
						}
						console.log(response.data)
					})
				// }
			},
			enterData(){
				// debugger;
				if(this.$route.query.state){
					this.getData();
					// debugger;
					var form = document.forms[0]; 
					for ( var i = 0; i < form.length; i++) { 
						var element = form.elements[i]; 
						element.disabled = true; 
					} 
				}else if(this.$route.query.state == 0){
					this.getData();
				}
			},
			getData(){
				this.$http.post(safeUrl.jraSeletById,{id:this.$route.query.id},{emulateJSON: true})
				.then((response) =>{

					let jraInfo = response.data.jraInfo;
					this.list.id = jraInfo.id;
					this.list.depId = jraInfo.depId;
					this.list.driverName = jraInfo.driverName;
					this.list.driverNo = jraInfo.driverNo;
					this.list.jraDate = jraInfo.jraDate;
					this.list.routeBegin = jraInfo.routeBegin;
					this.list.routeEnd = jraInfo.routeEnd;
					this.list.carBrand = jraInfo.carBrand;
					this.list.carModel = jraInfo.carModel;
					this.list.seatCount = jraInfo.seatCount;
					this.list.jraDescribe = jraInfo.jraDescribe;

					let infoSelect = response.data.jraSelect;
					let radioArrList = document.querySelectorAll("input[type=radio]");
					let infoArr = [];

					for(let i=0; i<infoSelect.length; i++){
						infoArr.push(infoSelect[i].dataNo + '&/&' + infoSelect[i].dataResult);
						if(infoSelect[i].dataResult == "Y" && infoSelect[i].dataSupplement != null){
							for(let k of this.beforeList){
								if(infoSelect[i].dataNo == k.id){
									k.state = true;
									document.getElementById(k.id).value = infoSelect[i].dataSupplement;
								}
							}
							for(let g of this.roadStatus){
								if(infoSelect[i].dataNo == g.id){
									g.state = true;
									document.getElementById(g.id).value = infoSelect[i].dataSupplement;
								}
							}
						}
					}

					for(let j=0; j<radioArrList.length; j++){
						if(infoArr.indexOf(radioArrList[j].value) != -1){
							radioArrList[j].setAttribute('checked','checked');
						}
					}

					this.items = response.data.jraContent;
					// debugger;
					setTimeout(()=>{
						if(this.$route.query.state == 1 || this.$route.query.state == 2){

							var form = document.forms;
							for(let j=0; j<form.length; j++){
								for ( var i = 0; i < form[j].length; i++) {
									var element = form[j].elements[i];
									element.disabled = true;
								}
							}
						}
					},10);
					console.log(response.data)
				})
				.then(function(response){
					console.log(response)
				})
			},
			//隐藏所有的展开的
			hideAll() {
				// debugger;
				var hideclass = document.getElementsByClassName('hidethis');
				for(var k=0; k<hideclass.length; k++){
					hideclass[k].style.display = 'none';
				}

				var fildList = document.getElementsByTagName('legend');
				for(var i=0; i<fildList.length; i++){
					fildList[i].childNodes[1].classList.add('ion-chevron-down');
				}
			},
			tagChage() {
				var vue = this;
				var fildList = document.getElementsByTagName('legend');
				for(var i=0; i<fildList.length; i++){
					fildList[i].onclick = (function(j){
						return function(){
							// debugger;
							if(this.nextSibling.nextSibling.style.display == 'none' && this.nextSibling.nextSibling.style.display){
								vue.hideAll();
								// debugger;
								this.childNodes[1].classList.remove('ion-chevron-down');
								this.childNodes[1].classList.add('ion-chevron-up');
								this.nextSibling.nextSibling.style.display = 'block';
							}else{
								vue.hideAll();
							}
						}
					})(i);
				}
			},
			yesChoose(item) {
				console.log(item)
				item.state = true;
			},
			hideChoose(item) {
				item.state = false;
			},
			addRist() {
				this.isShow = true;
			},
			savenm(e) {
				if(e == "1"){
					var oInput = document.forms[0].elements;
					var seat = document.getElementById('seating');
					if(seat.value && seat.value <= 0){
						var vue = this;
		                this.tipsShow = true;
		                this.tipsMessage = "座位数不能小于1";
		                window.setTimeout(function () {
		                	vue.tipsShow = false;
		                	vue.tipsMessage = '';
		                }, 2000);
		                return false
					}
			        if (!this.vaildForm(oInput)) {
			          return false
			        }
			        
		        }
				var listRadio = [];
		        var radioArrList = document.querySelectorAll("input[type=radio]");
		        for(var i=0; i<radioArrList.length; i++){
		          if(radioArrList[i].checked){
		          	// debugger;
		          	if(radioArrList[i].value.indexOf("Y") != -1){
		          		var ids = radioArrList[i].value.split("&/&")[0];
		          		listRadio.push(radioArrList[i].value + "&/&" + document.getElementById(ids).value);
		          	}else{
		          		listRadio.push(radioArrList[i].value);
		          	}
		          }
		        }
		        this.list.state = e;
		        this.list.jraSelect = listRadio;
		        this.list.jraContent = JSON.stringify(this.items);

		        if(this.checkName != this.list.driverName){
		        	this.list.depId = '';
		        }

		        // if(this.list.jraContent.length){

		        // }
		        console.log(this.items.length);
		        console.log(this.list)
		        // debugger;
				
				var vue = this;
		        if(this.items.length>0){
					if(this.isSubmit){
						this.isSubmit = false;
						setTimeout(function (){
							this.isSubmit= true;
						},2000);
						this.getInfo({
							url:safeUrl.jraSendData,
							param:this.list,
							success:function(response){
								// console.log(param);
								this.toastShow = true;
								this.tipMessage = response.data.msg;
								// setTimeout(()=>{
								// 	this.toastShow = false;;
								// 	if(response.data.type == "2"){
								// 		window.history.go(-1);
								// 	}

								// },1500);
								this.sendRemindng()

								console.log(response.data);
							},
							fail:function(response){

							}
						})
					}
		        	
		        }else{
		        	vue = this;
	                this.tipsShow = true;
	                this.tipsMessage = "请至少添加一条沿途事故风险！";
	                window.setTimeout(function () {
	                	vue.tipsShow = false;
	                	vue.tipsMessage = '';
	                }, 2000);
	                return false
		        }
			},
			sendRemindng() {
				let params = {
					empNum:this.$route.query.empNo,
					taskName:this.$route.query.typeName
				}
				const vue = this
				this.getInfo({
					url:safeUrl.taskReminding,
					param:params,
					success:function(response) {
						setTimeout(function(){
							vue.toastShow = false;
							window.history.go(-1);
						},1500);
					},
					fail:function() {
						setTimeout(function(){
							vue.toastShow = false;
							window.history.go(-1);
						},1500);
					}
				})
			},
			delRisk(index) {
				this.items.splice(index,1);
			}
		}
	}
</script>